import React from 'react'

import { Flex } from 'antd-mobile'

import { withRouter } from 'react-router-dom'

import PropTypes from 'prop-types'

import './index.scss'

function SearchHeader({ history, cityName, className }) {
  return (
    <Flex className={["search-box", className || ''].join(' ')}>
      {/* 左侧搜索框 */}
      <Flex className="search-left" direction="row">
        <div className="location" onClick={() => history.push('/cityList')}>
          <span className="name">{cityName}</span>
          <i className="iconfont icon-arrow"></i>
        </div>

        <div className="info" onClick={() => history.push('/rent/search')}>
          <i className="iconfont icon-search"></i>
          <span className="text">请输入小区或地址</span>
        </div>
      </Flex>
      <i className="iconfont icon-map" onClick={() => history.push('/map')}></i>
    </Flex>
  )
}

SearchHeader.propTypes = {
  cityName: PropTypes.string.isRequired
}

export default withRouter(SearchHeader)